<!DOCTYPE html>
<html>

<head>
    <link rel="stylesheet" href="../../../plugins/layui/css/layui.css"/>
    <link rel="stylesheet" href="../../../css/normalize.css"/>
    <link rel="stylesheet" href="../../../css/fa.css"/>
    <link rel="stylesheet" href="../../../css/icon.css"/>
    <link rel="stylesheet" href="../../../css/ares_animate.min.css"/>
    <link rel="stylesheet" href="../../../css/ares_hover_variant.min.css"/>
    <link rel="stylesheet" href="../../../css/ares_reboot.css"/>
    <link rel="stylesheet" href="../../../css/app.min.css"/>
    <link rel="stylesheet" href="../../../css/iframe.css"/>
    <style>
        .layui-form-checkbox, .layui-form-checkbox > span {
            width: 100%;
        }
    </style>
</head>

<body>
<form class="ares-p layui-form" lay-filter="form">
    <div class="layui-form-item">
        <label class="layui-form-label">治疗人员</label>
        <div class="layui-input-block">
            <select id="treatment-therapist" name="treatmentTherapist" lay-verify="required" lay-filter="treatmentTherapist"></select>
            <div class="ares-text-sm ares-text-red">
                <span id="therapist-append-group" class="ares-mr-lg"></span>
                <span id="therapist-append-patient-num"></span>
            </div>
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">治疗频次</label>
        <div class="layui-input-block">
            <input type="radio" name="frequency" value="1" lay-filter="frequency" title="qd(一日一次)" checked>
            <input type="radio" name="frequency" value="2" lay-filter="frequency" title="bid(一日二次)">
            <input type="radio" name="frequency" value="3" lay-filter="frequency" title="tid(一日三次)">
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">治疗次数</label>
        <div class="layui-input-block">
            <input name="times" required value="1" lay-verify="required|number|min" min="1" lay-verify-label="治疗次数" placeholder="请输入治疗次数" class="layui-input">
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">治疗日期</label>
        <div class="layui-input-block">
            <input name="treatmentDay" id="treatment-day" placeholder="请选择治疗日期" class="layui-input" lay-verify="required" readonly>
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">治疗时间</label>
        <div id="treatment-time-wrap" class="layui-input-block"></div>
    </div>
    <div class="layui-form-item">
        <div class="layui-input-block">
            <button class="layui-btn" lay-submit lay-filter="submit">提交表单</button>
        </div>
    </div>
</form>


<script type="text/javascript" src="../../../plugins/layui/layui.js"></script>
<script type="text/javascript" src="../../../aresExtends/config/layuiConfig.js"></script>
<script>
    layui.use(['laydate', 'form', 'mandyServices', 'qs', 'dayjs', '_', 'utils'], function (laydate, form, mandyServices, qs, dayjs, _, utils) {
        var queryParams = qs.parse(location.search.substr(1)),
            editAble = !!(queryParams.edit * 1),
            emrId = queryParams.emrId,
            cacheTypeData = utils.ARES.cache.trainingProgramType,
            cacheComboData = utils.ARES.cache.trainingProgramCombo,
            cacheData = utils.ARES.cache.trainingProgramTherapist,
            groupInfo = {},
            therapists = [],
            allTimeBlockList = [],
            currentTherapist = {},
            isCombo = cacheComboData && $.isPlainObject(cacheComboData) ? true : false;
        console.log(cacheTypeData, cacheData)
        init();

        laydate.render({
            elem: '#treatment-day',
            min: 0,
            value: new Date(),
            showBottom: false,
            done: function (value) {
                getTreatmentTimeBlock();
            }
        });

        /**
         * @author: ares
         * @date: 2021/3/9 9:52
         * @description: 提交表单
         */
        form.on('submit(submit)', function (data) {
            var fields = data.field;
            filterCurrentTherapist(fields.treatmentTherapist);
            var info = $.extend({}, fields, {therapistInfo: currentTherapist, groupInfo: groupInfo, allTimeBlockList: allTimeBlockList});
            utils.ARES.event.emit('updateTrainingProgramTherapist', info);
            utils.layer.closeAll('iframe');
            return false;
        });

        /**
         * @author: ares
         * @date: 2021/3/9 9:52
         * @description: 切换治疗师
         */
        form.on('select(treatmentTherapist)', function (data) {
            showTherapistAppendInfo();
            getTreatmentTimeBlock();
        });

        /**
         * @author: ares
         * @date: 2021/3/9 9:52
         * @description: 切换治疗频次
         */
        form.on('radio(frequency)', function (data) {
            getTreatmentTimeBlock();
        });

        /**
         * @author: ares
         * @date: 2021/3/10 16:20
         * @description: 根据治疗师id获取治疗师信息
         * @param{string}  therapistId  治疗师id
         */
        function filterCurrentTherapist(therapistId) {
            var filterTherapist = _.filter(therapists, function (therapist) {
                return therapist.id == therapistId;
            });
            if (filterTherapist.length) {
                currentTherapist = filterTherapist[0];
                return filterTherapist[0];
            }
            return null;
        }

        /**
         * @author: ares
         * @date: 2021/3/10 15:27
         * @description: 获取治疗师
         */
        function getTreatmentTherapist() {
            var prcpItemTypeId = '';
            if(isCombo){
                prcpItemTypeId = cacheComboData.comboInfo.typeId;
            }else {
                prcpItemTypeId = cacheTypeData.groupInfo.prcp_item_type.id;
            }
            mandyServices.mandy_get_therapist_by_typeId(prcpItemTypeId).then(function (res) {
                var data = res.data,
                    list = data.acc_list,
                    $treatmentTherapist = $('#treatment-therapist'),
                    $fragment = $(document.createDocumentFragment());
                therapists = list;
                groupInfo = data.group;
                $fragment.append('<option value="">请选择</option>');
                $.each(list, function (idx, item) {
                    if (!item.disable) $fragment.append('<option value="' + item.id + '">' + item.name + '</option>');
                });
                $treatmentTherapist.empty().append($fragment);
                if (editAble && $.isPlainObject(cacheData)) {
                    form.val('form', {
                        treatmentTherapist: cacheData.treatmentTherapist
                    });
                }
                form.val('form', {
                    treatmentTherapist: list[0].id
                });
                form.render('select');
                showTherapistAppendInfo();
                getTreatmentTimeBlock();
            });
        }

        /**
         * @author: ares
         * @date: 2021/3/10 22:16
         * @description: 显示治疗师额外信息
         */
        function showTherapistAppendInfo() {
            var filterTherapist = filterCurrentTherapist(form.val('form').treatmentTherapist);
            if (!filterTherapist) return;
            $("#therapist-append-group").text('治疗师所在组: ' + groupInfo.name);
            $("#therapist-append-patient-num").text('治疗师负责患者人数: ' + filterTherapist.total_patient_number + '人');
        }

        /**
         * @author: ares
         * @date: 2021/3/10 16:21
         * @description: 查询治疗时间块
         */
        function getTreatmentTimeBlock() {
            var therapistId = form.val('form').treatmentTherapist,
                day = +new Date($('#treatment-day').val());
            mandyServices.mandy_get_therapist_schedule_period(therapistId, emrId, day).then(function (res) {
                var data = res.data,
                    list = data.time_block_list,
                    $treatmentTimeWrap = $('#treatment-time-wrap'),
                    $fragment = $(document.createDocumentFragment());
                $.each(list, function (idx, item) {
                    var startTime = dayjs(item.start_time).format('HH:mm'),
                        endTime = dayjs(item.end_time).format('HH:mm'),
                        timeBlock = startTime + '-' + endTime;
                    item.itemName = timeBlock;
                    $checkboxWrap = $('<div class="ares-d-inline-block">'
                        + '<input type="checkbox" name="timeBlock-' + idx + '" title="' + timeBlock + '" value="' + timeBlock + '" lay-skin="primary" lay-verify="requiredCheckBox|maxCheckBox" lay-verify-label="治疗时间" max="' + form.val('form').frequency + '">'
                        + '</div>');
                    if (!item.enable || item.end_time < new Date()) $checkboxWrap.find('input').prop('disabled', true);
                    if (editAble && $.isPlainObject(cacheData) && cacheData['timeBlock-' + idx] == item.itemName) {
                        $checkboxWrap.find('input').prop('checked', true);
                    }
                    $fragment.append($checkboxWrap);
                });
                allTimeBlockList = list;
                $treatmentTimeWrap.empty().append($fragment);
                form.render();
            });
        }


        /**
         * @author: ares
         * @date: 2021/3/10 12:15
         * @description: 初始化
         */
        function init() {
            getTreatmentTherapist();
            if (editAble && $.isPlainObject(cacheData)) {
                form.val('form', {
                    frequency: cacheData.frequency,
                    times: cacheData.times,
                })
            }
        }
    })
</script>
</body>

</html>
